<template>
  <div class="sider-bar-items">
    <div
      class="sider-bar-item-shell"
      :class="{ 'sider-bar-item-selected': path === item.id }"
      :key="item.id"
      v-for="item in btnsNames"
      @click="changeRoute(item.id)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
import global from "@/components/Global";
export default {
  props: ["path"],
  data() {
    return {
      btnsNames: [
        { id: 0, route: "estores", title: "我的店铺" },
        { id: 1, route: "orders", title: "我的订单" },
        { id: 2, route: "", title: "个人资料" },
      ],
    };
  },
  methods: {
    changeRoute(id) {
      let route = this.btnsNames[id].route;
      if (!route) {
        this.$emit("setDialogVisible");
        return;
      }
      if (id === 0) global.toMain(this);
      else if (id === 1) global.toOrders(this);
      this.$router.push(route);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/global";
.sider-bar-items {
  display: flex;
  height: 65%;
  width: 100%;
  flex-direction: column;
  justify-content: space-around;
  font-size: 1.5rem;
  text-align: center;
  color: #666;
  cursor: pointer;
  .sider-bar-item-shell {
    height: 30%;
    line-height: 350%;
    margin-top: 3rem;
    background-size: cover;
    background-position: 0 -0.5rem;
  }
  .sider-bar-item-selected {
    background-image: url("../assets/img/mainSiderTxtBar.png");
    color: #fff;
  }
}
</style>
